<template>
  <div class="weekBody" v-loading="loading">
    <div
      v-for="(item, index) in futureWeatherFifteenList"
      :key="index"
      class="weatherBody"
    >
      <div style="margin-bottom: 0.2rem">{{ formatDateWeek(item.fxDate) }}</div>
      <div class="weekDate">{{ formatDateDay(item.fxDate,true) }}</div>
      <div class="weekWeather">
        <div
          style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                  "
        >
          <div style="opacity: 0.6">白天</div>
          <!--                <img style="width: 30px;height: 30px" :src="require(`../../assets/xinZhiPNG/${item.code_day}@1x.png`)"/>-->
          <i style="font-size: 25px" :class="`qi-${item.iconDay}`" />
          <div>{{ item.textDay }}</div>
        </div>
        <div
          style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                  "
        >
          <div style="opacity: 0.6">夜晚</div>
          <!--                <img style="width: 30px;height: 30px" :src="require(`../../assets/xinZhiPNG/${item.code_night}@1x.png`)"/>-->
          <i style="font-size: 25px" :class="`qi-${item.iconNight}`" />
          <div>{{ item.textNight }}</div>
        </div>
      </div>
      <div style="display: flex; align-items: center">
        <div>{{ item.tempMax }}℃</div>
        <div class="wdStyle"></div>
        <div>{{ item.tempMin }}℃</div>
      </div>
      <!--            <div style="font-size: 10px">相对湿度{{item.humidity}}%</div>-->
      <!--            <div style="font-size: 10px">{{item.wind_direction}}风 {{item.wind_speed}}km/h</div>-->
    </div>
  </div>
</template>

<script>
import {weatherInfoForSeenDay} from "@/api/cityInfo";
import { formatDate, formatDateDay, formatDateTime } from "../../utils";
import 'lib-flexible'
export default {
  name: "weekForecast",
  data(){
    return {
      futureWeatherFifteenList: [],
      //周日至周六
      weekDays:['星期日','星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      loading:false
    }
  },
  mounted() {
    this.getFutureWeatherForFifteen()
  },
  methods:{
    formatDateDay,
    formatDate,
    //获取周几
    formatDateWeek(data){
      let day = new Date(data)
      return this.weekDays[day.getDay()]
    },
    //获取未来7天天气预报
    async getFutureWeatherForFifteen() {
      this.loading = true
      // let httpUrl = 'https://api.seniverse.com/v3/weather/hourly.json?key=SfOcYG07nsrQQ2w8G&location=liaocheng&language=zh-Hans&unit=c&start=0&hours=24'
      // let httpUrl = 'https://api.seniverse.com/v3/weather/daily.json?key=SfOcYG07nsrQQ2w8G&location=liaocheng&language=zh-Hans&unit=c&start=0&days=15'
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // this.futureWeatherFifteenList = res.results[0].daily
      let resJson = await weatherInfoForSeenDay({
        location: "101121701",
        lang: "zh",
        cityName: "聊城",
      });
      this.loading = false
      let res = JSON.parse(resJson.data);
      this.futureWeatherFifteenList = res.daily;
    },
  }
}
</script>

<style lang="scss" scoped>
.weekBody{
  margin: 14px;
  //border-radius: 10px;
  display: flex;
  overflow-x: auto;
  .weatherBody {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    border-right: 3px solid #5EACFE;
    background: linear-gradient(88deg, #DFEFFF 0%, #8FC6FF 86%);
    border-radius: 10px;
    .weekDate{
      margin-bottom: 10px;
    }
    .weekWeather{
      display: flex;
      justify-content: space-between;
      width: 80px;
      margin-bottom: 5px;
    }
    .wdStyle {
      width: 50px;
      background-color: red;
      height: 5px;
      border-radius: 5px;
      background-image: linear-gradient(to right, #f18360, #427bff);
      flex: 1 0;
      margin: 5px;
    }
  }
}
::-webkit-scrollbar{
  width: 0px;
  height: 0px;
}
scrollbar {
  width: 0px;
  height: 0px;
}
</style>
